﻿@page "/TimePicker/Default-Functionalities"

@using Syncfusion.Blazor.Calendars

@inherits SampleBaseComponent;

<SampleDescription>
   <p>The following sample demonstrates the default functionalities of the TimePicker. Click the TimePicker icon to select a desired time and the selected time value will be displayed in the TimePicker element.</p>
</SampleDescription>
<ActionDescription>
    <p>A <code>TimePicker</code> is an interactive component that provides an option to select a value from popup list or set a desired time value.</p>
    <p>More information about the TimePicker and it's configuration can be found in the <a href='https://blazor.syncfusion.com/documentation/timepicker/getting-started/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="timepicker-section">
        <div id="wrapper" class="timepicker-control">
            <div class="tabs-wrap">
                <div class="wrap">
                    <SfTimePicker TValue="DateTime?" Placeholder="Select a time"></SfTimePicker>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    #wrapper {
        max-width: 300px;
        margin: 0px auto;
        padding-top: 20px;
    }

    .tabs-wrap {
        padding: 0 0px 10px;
    }

    .e-bigger .control-section {
        margin-top: 60px;
    }
</style>
